<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http:////at.alicdn.com/t/font_1190625_n3wlu0ewu1n.css">
    <link rel="stylesheet" href="../../css/hui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/config.css">
    <title>地址管理</title>
    <style>
        html,body{
            background-color: #FAFAFE;
        }
        .address_list{
            width: 100%;
            overflow: hidden;

        }
        .item{
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 0 .15rem;
            background-color: #fff;
            margin-top: .1rem;
        }
        .item .user_info{
            width: 100%;
            font-size: .16rem;
            color: #333;
            margin-top: .2rem;
            margin-bottom: .1rem;
        }
        .item .user_info .phone{
            position: relative;
            top: 0.01rem;
        }
        .item .user_info span:first-child{
            margin-right: .15rem;
        }
        .item .address{
            width: 100%;
            max-height: .34rem;
            line-height: .17rem;
            font-size: .14rem;
            color: #999;
            margin-bottom: .2rem;
        }
        .item .btn_opt{
            width: 100%;
            height: .46rem;
            border-top: 1px solid #eee;
        }
        .set_default{
            width: auto;
        }
        .set_default .checkicon {
           width: .15rem;
           height: .15rem;
           border-radius: 50%;
           border: 1px solid #333C3C;
           position: relative;
        }
        .set_default .checkicon i{
           display: none;
           font-size: .2rem;
           position: absolute;
           left: -0.04rem;
           top: -0.05rem;
        }
        .set_default .active i{
            display: block;
        }
        .set_default span{
            font-size: .12rem;
            color: #666;
            display: inline;
            margin-left: .04rem;
            position: relative;
            top: -0.01rem;
        }
        .item .detel{
            width: .54rem;
            height: .26rem;
            margin-left: .4rem;
            margin-right: .15rem;
            border-radius: .02rem;
            line-height: .26rem;
            border: 1px solid #ddd;
            text-align: center;
            font-size: .12rem;
            color: #333;
        }
        .item .edit{
            width: .54rem;
            height: .26rem;
            border-radius: .02rem;
            line-height: .26rem;
            text-align: center;
            font-size: .12rem;
            color: #fff;
        }
        .btn-bg{
            width: 100%;
            height: .85rem;
            overflow: hidden;
            position: fixed;
            bottom: 0;
            background-color: #FAFAFE;
        }
        .btn-add{
            width: 3.47rem;
            height: .44rem;
            margin-top: .1rem;
            line-height: .44rem;
            margin: 0 auto;
            background: transparent;
            border: 1px solid #333C3C;
        }
    </style>
</head>
<body>
    <header class="header mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">地址管理</h1>
    </header>
    <div class="main">
        <div class="address_list">
            <!-- <div class="item">
                <div class="user_info flex align-items flex_start">
                     <span class="name">张先生</span>
                     <span class="phone">15621365423</span>
                </div>
                <div class="address ellipsis2">郑州市 二七区 南三环 连云路 橄榄城 都市广场 B座6楼603</div>
                <div class="btn_opt flex flex_end align-items">
                    <div class="set_default flex flex_start align-items">
                        <div class="checkicon active fl">
                            <i class="iconfont icon-round_check_fill app-font-color"></i>
                        </div>
                        <span class="fl">默认送货地址</span>
                    </div>
                    <div class="detel">删除</div>
                    <div class="edit app-bg-color">编辑</div>
                </div>
            </div> -->
        </div>
    </div>
    <div class="btn-bg">
        <div class="btn-add btn-dan link-to" data-href="../user/address_add.html" data-status="">添加地址</div>
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/hui.js"></script>
<script src="../../js/common.js"></script>
<script>
    $(document).ready(function(){
        getAddressList()
        function getAddressList(){
            ajax('/api/user/get_my_address',{},function(res){
                if (res.code == 1) {
                    var html = "";
                    var dt = res.data || [];
                    dt.map((v,i)=>{
                        html+='<div class="item"><div class="user_info flex align-items flex_start">'
                                +'<span class="name">'+v.name+'</span>'
                                +'<span class="phone">'+v.phone+'</span></div>'
                                +'<div class="address ellipsis2">'+function(){
                                        var sheng   = v.province_text;
                                        var shi     = v.city_text;
                                        var qu      = v.district_text;
                                        var address = v.address;
                                        var ssq     = "";
                                        if (sheng == shi) {
                                            ssq =  sheng+"市"+qu+address
                                        }else{
                                            ssq = sheng+"省"+shi+"市"+qu+address;
                                        }
                                        return ssq
                                }()+'</div>'
                                +'<div class="btn_opt flex flex_end align-items"><div class="set_default flex flex_start align-items" data-id="'+v.address_id+'">'
                                +'<div class="checkicon fl '+function(){
                                    return v.status == 1 ? "active" : ""
                                }()+'"><i class="iconfont icon-round_check_fill app-font-color"></i>'
                                +'</div><span class="fl">默认送货地址</span></div>'
                                +'<div class="detel" data-id="'+v.address_id+'">删除</div>'
                                +'<div class="edit app-bg-color link-to" data-id="'+v.address_id+'"  data-status="'+v.status+'" data-href="../user/address_edit.html">编辑</div></div></div>'
                    })
                    $('.address_list').html(html)
                    $('.btn-add').data('status',0)
                }else{
                    $('.address_list').empty()
                    $('.btn-add').data('status',1)
                }
            })
            
        }
        // 给setdefault添加默认事件
        $(document).on('click',".set_default",function(){
            var _this = this;
            $('.set_default').each(function(){
                var $checkicon = $(this).find('.checkicon');
                _this == this ? $checkicon.addClass('active'):$checkicon.removeClass('active');
            })
            var id = $(this).data('id');
            ajax('/api/user/set_default_address',{address_id:id},function(){})
        })
        //删除地址
        $(document).on('click',".detel",function(){
            var id= $(this).data('id')
            hui.confirm('您确认要删除吗？', ['取消','确定'], function(){
                ajax('/api/user/del_my_address',{address_id:id},function(res){
                    hui.toast(res.msg)
                    getAddressList()
                })
            },function(){
                console.log('取消后执行...');
            });
            
        })
    })
    
    

</script>
</html>